<!--
 * @Author: 王庆庆
 * @Date: 2024-11-08 18:09:59
 * @LastEditors: 王庆庆
 * @LastEditTime: 2025-02-10 17:51:54
 * @Description: 文件描述
-->
<template>
  <div class="module-item flex">
    <el-button
      v-if="menuList.length"
      class="btn-top"
      @click="gotBottom()"
      type="success"
      title="回到底部"
      icon="Bottom"
      circle
    />
    <div class="left-part">
      <!-- <el-select
				style="width: 100%"
				v-model="selectResult"
				@change="changeSelect"
				clearable
				filterable
				placeholder="请选择">
				<el-option
					v-for="(item, index) in menuList"
					:key="index"
					:label="item.text"
					:value="item.id" />
			</el-select> -->
      <el-tree-select
        :filter-node-method="filterMethod"
        :default-expand-all="true"
        v-model="selectResult"
        @node-click="handleCheckChange"
        :data="menuList"
        :props="defaultProps"
        filterable
      />

      <div class="menu-part scrollbar-y-bigscreen">
        <div
          @click="getItem(item)"
          class="menu-item flex-y-center"
          v-for="(item, index) in menuList"
          :key="index"
        >
          {{ index + 1 }}. {{ item.text }}
        </div>
      </div>
    </div>
    <div class="right-part scrollbar-y-bigscreen">
      <div v-html="htmlDom"></div>
    </div>

    <el-button class="btn-home" @click="gotHome()" type="primary"
      >返回主页</el-button
    >
    <el-button
      v-if="menuList.length"
      class="btn-bottom"
      @click="gotTop()"
      type="success"
      title="回到顶部"
      icon="Top"
      circle
    />
  </div>
</template>
<script setup>
import PinyinMatch from "pinyin-match";
import { ElMessageBox, ElMessage, ElRadioGroup, ElRadio } from "element-plus";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { ref, onMounted, nextTick } from "vue";
import { useFile } from "@/hooks/useFile";
const { getFile } = useFile();
let defaultProps = {
  children: "children",
  label: "text",
  value: "id",
};
// 动态引入不能用@
let str = ``;
// 开发环境
if (window.IS_DEVELOP) {
  if (route.query.parent) {
    str = `./../../../public/libs/${route.query.parent}/${route.query.label}.md`;
  } else {
    str = `./../../../public/libs/${route.query.label}.md`;
  }
} else {
  if (route.query.parent) {
    str = `./../libs/${route.query.parent}/${route.query.label}.md`;
  } else {
    str = `./../libs/${route.query.label}.md`;
  }
}

str += `?v=${Math.random()}`;

const url = new URL(str, import.meta.url).href;
let htmlDom = ref("");
let menuList = ref([]);
let selectResult = ref(null);
onMounted(async () => {
  let obj = await getFile(url);
  menuList.value = obj.menuList;
  htmlDom.value = obj.htmlDom;
  nextTick(() => {
    let dom = document.querySelectorAll("code");
    dom.forEach((item) => {
      item.style.cursor = "pointer";
      item.addEventListener("click", function () {
        let text = item.textContent;
        try {
          toClipboard(text);
          ElMessage.success("复制成功");
        } catch (e) {
          console.error(e);
          ElMessage.warning("复制失败！您的浏览器不支持复制功能！");
        }
      });
    });
  });
});
const filterMethod = (value, data) => {
  if (!value) return true;
  return PinyinMatch.match(data.text, value);
};
const changeSelect = () => {
  if (selectResult.value) {
    let dom = document.getElementById(selectResult.value);
    dom.scrollIntoView({ behavior: "smooth", block: "start" });
  } else {
    getItem(menuList.value[0]);
  }
};
const getItem = (item) => {
  let dom = document.getElementById(item.id);
  dom.scrollIntoView({ behavior: "smooth", block: "start" });
};
const gotBottom = () => {
  getItem(menuList.value[menuList.value.length - 1]);
};
const gotTop = () => {
  getItem(menuList.value[0]);
};

const gotHome = () => {
  router.push({
    path: "/home",
  });
};
</script>

<style lang="scss" scoped>
.module-item {
  width: 100%;
  height: 100%;
  position: relative;
  .left-part {
    width: 30%;
    height: 100%;
    padding: 10px;
    background: #ececec;
    .menu-part {
      width: 100%;
      height: calc(100% - 60px);
      background: #fff;
      padding: 10px;
      margin-top: 10px;
      .menu-item {
        cursor: pointer;
        min-height: 30px;
        padding-left: 10px;
        font-weight: 600;
        &:hover {
          color: #abb2bf;
          background: #282c34;
        }
      }
    }
  }
  .right-part {
    width: 60%;
    height: calc(100% - 20px);
    padding: 10px;
    overflow-x: hidden;
  }
  .btn-top {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1000;
  }
  .btn-home {
    position: absolute;
    top: 100px;
    right: 20px;
    z-index: 1000;
  }
  .btn-bottom {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
  }
}
</style>
